<html>
<head>
<link rel="stylesheet" type="text/css" href="/styles/map.css" />
<style type="text/css">

body {
	margin: 0px;
	cursor: default;
}
h1 {
	margin: 0px;
	text-align: center;
}
.scrollable {
	overflow: scroll;
}

#banner {
	width: 364; //728;
	height: 45; //90;
	background-color: green;
}

#viewport {
	position: relative;

	width: 480px;
	height: 320px;
	overflow: hidden;
	background-color: lightgray;
}

#world {
	position: absolute;
	left: 240px;
	top: 160px;

	width: 0px;
	height: 0px;
}
.area {
	position: absolute;
	
	width: 40px;
	height: 40px;
	margin: -20px;

	background-image: url(area.png);
	back ground-image: url(area.png), url(area_path_nw.png), url(area_path_ne.png), url(area_path_w.png), url(area_path_e.png), url(area_path_sw.png), url(area_path_se.png);
	background-size: 100%;
}
.area .force {
	position: absolute;
	width: 40px;

	text-align: center;
	line-height: 40px;
}
.area .name {
	position: absolute;
	left: -40px;
	bottom: -20px;
	width: 120px;

	text-align: center;
	white-space:nowrap;

	overflow: hidden;
	text-overflow: ellipsis;	
}
.area .info {
	position: absolute;
	width: 120px;
	margin: -20px -40px;

	text-align: center;
	white-space:nowrap;

	overflow: hidden;
	text-overflow: ellipsis;	
}
.path0, .path1, .path2, .path3, .path4, .path5, .path6, .path7 {
	position: absolute;
	width: 120px;
	height: 120px;
	margin: -60px;

	background-size: 100%;
}
.path0 {
	background-image: url(path0.png);
}
.path1 {
	background-image: url(path1.png);
}
.path2 {
	background-image: url(path2.png);
}
.path3 {
	background-image: url(path3.png);
}
.path4 {
	background-image: url(path4.png);
}
.path5 {
	background-image: url(path5.png);
}
.path6 {
	background-image: url(path6.png);
}
.path7 {
	background-image: url(path7.png);
}

#hud {
	position: absolute;

	width: 480px;
	height: 320px;	
}
.hud_button {
	position: absolute;
	width: 80px;
	height: 80px;

	background-image: url(hud_button.png);
	background-size: 100%;

	text-align: center;
	line-height: 80px;
}
#hud_button_main, #hud_button_games, #hud_button_status, #hud_button_messages {
	left: 0px;
}
#action_x, #action_zoom_in, #action_zoom_out, #action_end {
	right: 0px;
}
#hud_button_main, #action_x {
	top: 0px;
}
#hud_button_games, #action_zoom_in {
	top: 80px;
}
#hud_button_status, #action_zoom_out {
	top: 160px;
}
#hud_button_messages, #action_end {
	top: 240px;
}
.menu {
	width: 320px;
	height: 160px;
	background-image: url(menu_background.png);
	background-size: 100%;
	opa city:0.5;

	visibility: hidden;

	margin: -120px -200px;
	position: absolute;
	left: 240px;
	top: 160px;

	padding: 40px;
}
.menu_hider {
	overflow: hidden;
	text-overflow: ellipsis;	
}
.menu_button {
	position: absolute;
	left: 160px;
	bottom: -40px;

	width: 80px;
	height: 80px;
	bo rder-width: 10px;
	bo rder-image: url("button_border.png") 10 stretch;
	background-image: url(hud_button.png);
	background-size: 100%;

	text-align: center;
	line-height: 80px;
}

</style>
<script type="text/javascript" src="/scripts/dom.js"></script>
<script type="text/javascript" src="/scripts/ajax.js"></script>
<script type="text/javascript" src="/scripts/map2.js"></script>
<script type="text/javascript">

function stopPropagation(e) {
	e = e | event; /* get IE event ( not passed ) */
	e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}

/**
 * Ajax functions
 */

function getPlayer() {
	var url = "getplayer.jsp";
	ajaxRequest(url, function(player, status) {
		if (status != 200) {
			alert("getPlayer() "+ status +" "+ message);
			return;
		}

		var playerId = document.getElementById("userId");
		playerId.value = player.name;
	});
}

function loadGames(init) {
	var url = "listgames.jsp";
	ajaxRequest(url, function(games, status) {
		if (status != 200) {
			alert("loadGames() "+ status +" "+ message);
			return;
		}

		var selectedGame = document.getElementById("selectedGame");
		for (var i = 0; i < games.length; ++i) {
			var game = games[i];
			selectedGame.add(buildOption(game.name, game.id), null);
		}

		if (init) loadSelectedGame();		
	});
}
function actionMove(from, to, force) {
	var id = getGameId();
	var url = "actionmove.jsp?id=" + id +"&from="+ from +"&to="+ to +"&force="+ force;
	ajaxRequest(url, function(game, status, message) {
		if (status != 200) {
			alert("actionMove() "+ status +" "+ message);
			return;
		}

		var game = wrapGame(game);
		var map  = wrapMap(game.map);

		updateGame(game, map);
	});
}
function actionBuild(area) {
	var id = getGameId();
	var url = "actionbuild.jsp?id=" + id +"&area="+ to +"&force="+ force;
	ajaxRequest(url, function(game, status, message) {
		if (status != 200) {
			alert("actionBuild() "+ status +" "+ message);
			return;
		}

		var game = wrapGame(game);
		var map  = wrapMap(game.map);

		updateGame(game, map);
	});
}
function endTurn() {
	var id = getGameId();
	var url = "endturn.jsp?id="+ id;
	ajaxRequest(url, function(json) {
// ??
	});
}
function loadGame(id) {
	var url = "getgame.jsp";

	if (id != null) {
		url += "?id="+ id;
	}

	ajaxRequest(url, function(game) {
		var game = wrapGame(game);
		var map  = wrapMap(game.map);

		updateGame(game, map);
	});
}

/**
 *
 */

function loadSelectedGame() {
	var selectedGame = document.getElementById("selectedGame");
	if (!selectedGame) return;

	loadGame(selectedGame.value);
}

/**
 * GameState and actions
 */

function setupViewport() {
	testViewport();
	getViewport().setXYZ(-240, -160, 2);

	var viewport = document.getElementById("viewport");
	viewport.onclick = clickViewport;
}
function setupHUD() {
	setupHUDButtons();
	setupMenus();
}
function setupHUDButtons() {
}
function setupMenus() {
	setupMenuLogin();
	setupMenuRegister();
	setupMenuWelcome();
	setupMenuMain();
	setupMenuGames();
	setupMenuStatus();
	setupMenuMessages();
}
function setupMenuLogin() {
	var menu = document.getElementById("menu_login");
	var button = document.getElementById("menu_login_ok");
	button.onclick = function() { alert("setupMenuLogin()"); toggleVisible(menu); }
}
function setupMenuRegister() {
	var menu = document.getElementById("menu_register");
	var button = document.getElementById("menu_register_ok");
	button.onclick = function() { alert("x"); toggleVisible(menu); }
}
function setupMenuWelcome() {
	var menu = document.getElementById("menu_welcome");
	var button = document.getElementById("menu_welcome_ok");
	button.onclick = function() { alert("x"); toggleVisible(menu); }
}
function setupMenuMain() {
	var menu = document.getElementById("menu_main");
	var button = document.getElementById("hud_button_main");
	button.onclick = function() { toggleMenu(menu, button); }
}
function setupMenuGames() {
	var menu = document.getElementById("menu_games");
	var button = document.getElementById("hud_button_games");
	button.onclick = function() { toggleMenu(menu, button); }
}
function setupMenuStatus() {
	var menu = document.getElementById("menu_status");
	var button = document.getElementById("hud_button_status");
	button.onclick = function() { toggleMenu(menu, button); }
}
function setupMenuMessages() {
	var menu = document.getElementById("menu_messages");
	var button = document.getElementById("hud_button_messages");
	button.onclick = function() { toggleMenu(menu, button); }
}

function clickViewport(event) {
	var sx = event.x;
	var sy = event.y;
	var wx = getViewport().getWorldX(sx);
	var wy = getViewport().getWorldY(sy);
//	alert(sx +":"+ sy +" "+ wx +":"+ wy +" "+ event.bubbles);
}
function clickAction(event, action) {
	alert("clickAction() "+ event +" "+ action +" "+ event.bubbles);
	
}

function GameState() {
	this.selected;
	this.clickArea = function(area) {
		// Select
		if (!this.selected) {
			this.selected = area;

			return;
		}
		if (this.selected == area) {
			this.selected = null;

			return;
		}

		// Move
		if (this.selected && this.selected != area) {
			actionMove(this.selected.name, area.name, 1);
		}

		// Build
	}
}
var theGameState = new GameState();

function clickArea(area) {
	state.clickArea(area);
}

/**
 * Game ID
 */

function getGameId() {
	var gameId = document.getElementById("gameId");
	if (!gameId) return;

	return gameId.value;
}
function setGameId(id) {
	var gameId = document.getElementById("gameId");
	if (!gameId) return;

	gameId.value = id;
}
function setGameState(state) {
	var gameState = document.getElementById("gameState");
	if (!gameState) return;

	gameState.value = state;
}


function Viewport(dx, dy, z) {
	this.dx = dx;
	this.dy = dy;
	this.z = z;

	this.getWorldX = function(sx) {
		return (sx + this.dx) / this.z;
	}
	this.getWorldY = function(sy) {
		return (sy + this.dy) / this.z;
	}
	this.getScreenX = function(wx) {
		return (wx * this.z) - this.dx;
	}
	this.getScreenY = function(wy) {
		return (wy * this.z) - this.dy;
	}

	this.setXY = function(dx, dy) {
		this.dx = dx;
		this.dy = dy;
	}
	this.setZ = function(z) {
		this.z = z;
	}
	this.setXYZ = function(dx, dy, z) {
		this.setXY(dx, dy);
		this.setZ(z);
	}
}
var theViewport = null;
function getViewport() {
	if (!theViewport) theViewport = new Viewport(0, 0, 1);
	return theViewport;
}

function test(actual, expected, message) {
	if (actual != expected) alert("test() "+ message +": a:'"+ actual +"' != e:'"+ expected +"'");
}
function testViewport() {
	getViewport().setXYZ(-20, -10, 2);
	test(getViewport().dx,-20, "1");
	test(getViewport().dy,-10, "2");
	test(getViewport().z,   2, "3");

	test(getViewport().getWorldX(0),  -10, "a1");
	test(getViewport().getWorldX(20),   0, "a2");
	test(getViewport().getWorldY(0),   -5, "a3");
	test(getViewport().getWorldY(10),   0, "a4");
	test(getViewport().getScreenX(0),  20, "b1");
	test(getViewport().getScreenX(20), 60, "b2");
	test(getViewport().getScreenY(0),  10, "b3");
	test(getViewport().getScreenY(10), 30, "b4");

	getViewport().setXYZ(0, 0, 1);

	test(getViewport().getWorldX(0),    0, "c1");
	test(getViewport().getWorldX(10),  10, "c2");
	test(getViewport().getWorldY(0),    0, "c3");
	test(getViewport().getWorldY(10),  10, "c4");
	test(getViewport().getScreenX(0),   0, "d1");
	test(getViewport().getScreenX(10), 10, "d2");
	test(getViewport().getScreenY(0),   0, "d3");
	test(getViewport().getScreenY(10), 10, "d4");
}

/**
* Wrap
*/

function wrapGame(game) {
	if (game == null) return;

	game.getPlayer = function(name) {
		var players = this.players;
		for (var i = 0; i < players.length; ++i) {
			var player = players[i];
			if (player.name == name) return player;
		}
		return null;
	}
	game.getPlayerId = function(name) {
		var players = this.players;
		for (var i = 0; i < players.length; ++i) {
			var player = players[i];
			if (player.name == name) return i;
		}
		return 0;
	}

	return game;
}
function wrapMap(map) {
	if (map == null) return;

	map.getArea = function(name) {
		var areas = this.areas;
		for (var i = 0; i < areas.length; ++i) {
			var area = areas[i];
			if (area.name == name) return area;
		}
		return null;
	}

	return map;
}
function wrapArea(area) {
	if (area == null) return;

	area.setForce = function(force) {}
	area.setOwner = function(owner) {}

	return area;	
}

function toFront(element) {
	if (!element) return;

	element.parentNode.appendChild(element);
}
function toBack(element) {
	if (!element) return;

	element.parentNode.insertBefore(element, element.parentNode.firstChild);
}
function toggleVisible(element) {
	if (!element) return;

	if (element.style.visibility != "visible") {
		element.style.visibility = "visible";
		return true;
	} else {
		element.style.visibility = "hidden";
		return false;
	}
}

/**
* World
*/

var theWorld;
function getWorld() {
	if (!theWorld) {
		var world = document.getElementById("world");
		theWorld = new World(world);
	}
	return theWorld;
}
function World(element) {
	this.element = element;
}

function updateGame(game, map) {
	setGameId(game.id);
	setGameState(game.state.name);

//	removeAllChildrenOfId("world");

	var areas = map.areas;
	for (var i = 0; i < areas.length; ++i) {
		var area = areas[i];
	}
}

function createWorld() {
}
function createAreas(svgMap) {
}
function createLanes(svgMap) {
}
function createHud(svgCanvas) {
}

function buildLanes(game, map, area) {
}
function buildHUD() {
	var hud = document.createElement("div");
	return hud;
}
function buildHUDMain() {
	var menu = buildHUDMenu("mnu_menu", "MENU");
	menu.appendChild(buildButton2("x_button", 0,-40, 30, "New Game"));
	menu.appendChild(buildButton2("y_button", 0, 40, 30, "List Games"));
	return menu;
}
function buildHUDStatus() {
	var menu = buildHUDMenu("sta_menu", "STATUS");
	menu.appendChild(buildText2(-150, -40, "Phear"));
	menu.appendChild(buildText2(-150,   0, "Aaron"));
	menu.appendChild(buildText2(-150,  40, "Aeryn"));
	menu.appendChild(buildText2(-150,  80, "Aegon"));
	menu.appendChild(buildText2(-150, 120, "Aefyn"));

	menu.appendChild(buildButton("up_button", 200,-120, 30, "A"));
	menu.appendChild(buildButton("dn_button", 200, 120, 30, "V"));
	return menu;
}
function buildHUDSettings() {
	var menu = buildHUDMenu("set_menu", "SETTINGS");
	menu.appendChild(buildText(0, -40, "X"));
	menu.appendChild(buildText(0,   0, "X"));
	menu.appendChild(buildText(0,  40, "X"));
	menu.appendChild(buildText(0,  80, "X"));
	menu.appendChild(buildText(0, 120, "X"));
	return menu;
}
function buildHUDMessages() {
	var menu = buildHUDMenu("msg_menu", "MESSAGES");

	menu.appendChild(buildRoundedRect(-150, 100, 300, 40, 10, ""));
	var text = buildText2(0, 120, "Text", "input");
	text.setAttributeNS (null, 'editable', 'true');
	menu.appendChild(text);
	menu.appendChild(document.createElement("input"));

	menu.appendChild(buildButton("up_button", 200,-120, 30, "A"));
	menu.appendChild(buildButton("dn_button", 200, 120, 30, "V"));
	return menu;
}
function buildHUDMenu(id, title) {
}

function buildButton(id, x, y, action) {
}

function toggleMenuId(menu_id, button_id) {
	var menu = document.getElementById(menu_id);
	var button = document.getElementById(button_id);

	toggleMenu(menu, button);
}
function toggleMenu(menu, button) {
	if (!menu) return;
	if (!button) return;

	var visible = toggleVisible(menu);
	if (visible) {
		toFront(menu);
		toFront(button);
	} else {
		toBack(menu);
		toBack(button);
	}
}

function updateWorld() {
	var data = document.getElementById("data");
	if (!data) return;

	alert("updateWorld() "+ data);
	var child = getChildById(data, "g1");
//	alert("updateWorld() "+ child +" "+ child.id +" "+ child.name +" "+ child.tag); // TODO: tag?!?

//	for(var i = 0; i < 
}
function updateWorld() {
	var data = JSON.parse('{ \
	"player": {"id":"p1","name":"Phear"},\
	"game":{ \
		"players": [ \
			{"player":{"id":"p1","name":"Phear"}}, \
			{"player":{"id":"p1","name":"Phear"}} \
		],\
		"areas":[] \
	} \
}');

	for (var i = 0; i < data.game.players.length; ++i) {
		var player = data.game.players[i];
		alert(player.id);
	}

	alert("updateWorld() "+ data.player);
}
function getChildById(parent, id) {
	if (!parent) return;
	if (!id) return;
	var children = parent.children;
	if (!children) return;

	for (var i = 0; i < parent.children.length; ++i) {
		var child = parent.children[i];
		if (child.id == id) return child;
	}

	return null;
//	throw "x";
}
function getChildrenByTag(parent, tag) {
//	...
}

function createArea(game, area) {
}
function createLane(game, area, target) {
	var ownerId = 0;
	if (area.owner == target.owner) {
		ownerId = game.getPlayerId(area.owner);
	}
}

function init() {
	setupViewport();
	setupHUD();

	getPlayer();
	loadGames(true);

	updateWorld();
}

window.onload = init;

</script>
</head>
<body>
<div id="viewport">
<div id="world">
<div class="path4" style="left:   0px; top:-120px;"></div>
<div class="path1" style="left: -90px; top: -60px;"></div>
<div class="path7" style="left: -30px; top: -60px;"></div>
<div class="path1" style="left:  30px; top: -60px;"></div>
<div class="path7" style="left:  90px; top: -60px;"></div>
<div class="path4" style="left: -60px; top:   0px;"></div>
<div class="path4" style="left:  60px; top:   0px;"></div>
<div class="path7" style="left: -90px; top:  60px;"></div>
<div class="path1" style="left: -30px; top:  60px;"></div>
<div class="path7" style="left:  30px; top:  60px;"></div>
<div class="path1" style="left:  90px; top:  60px;"></div>
<div class="path4" style="left:   0px; top: 120px;"></div>

<div class="area" style="left: -60px; top:-120px;"><div class="name">Homestead</div><div class="force">5</div><div class="info">-5/-5</div></div>
<div class="area" style="left:  60px; top:-120px;"><div class="name">Argon</div><div class="force">5</div><div class="info">-5/+5</div></div>
<div class="area" style="left:-120px; top:   0px;"><div class="name">Nibor</div><div class="force">5</div><div class="info">+5/-5</div></div>
<div class="area" style="left:   0px; top:   0px;"><div class="name">Naboo</div><div class="force">5</div><div class="info">+5/+5</div></div>
<div class="area" style="left: 120px; top:   0px;"><div class="name">IX</div><div class="force">55</div><div class="info">+55/+55</div></div>
<div class="area" style="left: -60px; top: 120px;"><div class="name">Dune</div><div class="force">555</div><div class="info">+555/+555</div></div>
<div class="area" style="left:  60px; top: 120px;"><div class="name">Extra Long Area Name</div><div class="force">5555</div><div class="info">+5555/+5555</div></div>
</div>

<div id="hud">
<div class="hud_button" id="hud_button_main">MAIN</div>
<div class="hud_button" id="hud_button_games">GAMES</div>
<div class="hud_button" id="hud_button_status">STATUS</div>
<div class="hud_button" id="hud_button_messages">MESS</div>
<div class="hud_button" id="action_x">X</div>
<div class="hud_button" id="action_zoom_in">+</div>
<div class="hud_button" id="action_zoom_out">-</div>
<div class="hud_button" id="action_end">END</div>

<div class="menu" id="menu_login"><h1>Login</h1>You need to login<div class="menu_button" id="menu_login_ok">OK</div></div>
<div class="menu" id="menu_register"><h1>Register</h1>You need to register<div class="menu_button" id="menu_register_ok">OK</div></div>
<div class="menu" id="menu_welcome"><h1>Welcome!</h1>You are logged in as Phear.<div class="menu_button" id="menu_welcome_ok">OK</div></div>
<div class="menu" id="menu_main"><h1>Main</h1><div id="banner"></div></div>
<div class="menu" id="menu_games"><h1>Games</h1><li>Phear's Gambit<li><li><li><li><li><li><li></div>
<div class="menu" id="menu_status"><h1>Status</h1>
<table border><thead><th>Player<th>Areas<th>%<th>Force<th>%<th>Heroes
<tbody>
<tr><td>Phear<td>10<td>40<td>30<td>30<td>5
<tr><td>Aaron<td>10<td>40<td>30<td>30<td>5
<tr><td>Echo<td>10<td>40<td>30<td>30<td>5
<tr><td>Viper<td>10<td>40<td>30<td>30<td>5
<tr><td>Master of the Universe<td>10<td>40<td>30<td>30<td>5
</table></div>
<div class="menu" id="menu_messages"><div class="scrollable"><h1>Messages</h1>
<li>Phear: Foo
<li>Phear: Bar
<li>Aaron: Foo
<li>Aaron: Bar
<li>Phear: Foo
<li>Phear: Bar
<li>Phear: Foo
<li>Phear: Bar</div></div>
</div>
</div>

<!--data id="data">
<game id="g1">
<state></state>
<players>
<player id="p1" name="Phear" x="0"></player>
<player id="p2" name="Aaron" x="0"></player>
<player id="p3" name="Very very long name" x="0"></player>
</players>
<areas>
<area id="a1" name="A" owner="p1" force="1"></area>
<area id="a2" name="B" owner="p2" force="1"></area>
<area id="a3" name="C" owner="p1" force="1"></area>
<area id="a4" name="D" owner="p2" force="1"></area>
<area id="a5" name="E" owner="p1" force="1"></area>
<area id="a6" name="F" owner="p2" force="1"></area>
</areas>
<paths>
<path id="p1" areaA="a1" areaB="a2"></path>
<path id="p2" areaA="a1" areaB="a3"></path>
<path id="p3" areaA="a1" areaB="a4"></path>
<path id="p4" areaA="a2" areaB="a4"></path>
<path id="p5" areaA="a2" areaB="a5"></path>
<path id="p6" areaA="a3" areaB="a4"></path>
<path id="p7" areaA="a3" areaB="a6"></path>
<path id="p8" areaA="a4" areaB="a5"></path>
<path id="p9" areaA="a4" areaB="a7"></path>
<path id="p10" areaA="a5" areaB="a7"></path>
<path id="p11" areaA="a6" areaB="a7"></path>
<path id="p12" areaA="a1" areaB="a2"></path>
</paths>
</game>
</data-->

<h1>Map 3</h1>
<li><input id="userId"></input> User
<li><input id="gameId"></input> Game
<li><input id="gameState"></input> State
<ul id="gameData"></ul>
<select id="selectedGame"></select>
<button onclick="loadSelectedGame()">Load</button>

</body>
</html>
